<template>
  <div>
    <div class="topbanner">
      <div class="banner">
        <div class="logo">
          <img src="../../../../assets/img/logo@3x.png" />
        </div>
        <div class="title">
          <h2>登录</h2>
        </div>
      </div>
    </div>
    <!-- 登录盒子 -->
    <div class="ulogin_box">
      <!-- 卡片 -->
      <el-card class="box_card">
        <!-- 登录表单 -->
        <el-form
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="loginForm"
          label-width="25px"
          class="demo-loginForm"

        >
        <span class="span">验证即登录，未注册手机请进行注册</span>
        <br /><br />
        <!-- 手机号 -->
        <el-form-item  prop="phone">
            <el-input 
               type="phone" 
               v-model.lazy="loginForm.phone" 
               autocomplete="off" 
               placeholder="请输入手机号" >
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <!-- <el-form-item  prop="code">
           <el-row :gutter="24">
            <el-col :span="16">
              <el-input 
                  type="code" 
                  v-model.lazy="loginForm.code" 
                  autocomplete="off" 
                  placeholder="请输入验证码">
              </el-input>
            </el-col>
            <el-col :span="8">
              <el-input type="code" autocomplete="off"></el-input>
            </el-col>
           </el-row>
          </el-form-item> -->
        <!-- 密码 -->
          <el-form-item prop="pwd">
            <el-input 
               type="password" 
               v-model.lazy="loginForm.pwd" 
               autocomplete="off" 
               placeholder="请输入密码">
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd2">
            <el-input 
                type="password" 
                v-model.lazy="loginForm.pwd2" 
                autocomplete="off" 
                placeholder="确认密码">
            </el-input>
          </el-form-item>
         <!-- 登录提交按钮 -->
          <el-form-item class="button">
            <el-row :gutter="120">
              <el-col :span="12">
                <el-button 
                   style="width:100%;background:#7440d8;color:azure;border:none;" 
                   @click="submitForm('loginForm')">登  录</el-button>
              </el-col>
              <el-col :span="12">
                <el-button style="width:100%;" @click="resetForm('loginForm')">重  置</el-button>
              </el-col>
            </el-row>
           
          </el-form-item>
        </el-form>

        <div class="hava" style="margin-top:40px;margin-left:335px;color:#7440d8;">
            <router-link  to="/userregister" class="color:#7440d8;">没有帐号,立即注册！</router-link>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script>
// import axios from "axios";

import useCounterStore from "../../../../store/index";
export default {
  data() {
    // 手机
    var phone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else if(!this.isPhone(value)) {//引入methods中封装的检查手机格式的方法
          callback(new Error('请输入11位的手机号'));
        }else{
          callback()
        }
      };

      var pwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.loginForm.pwd2 !== '') {
            this.$refs.loginForm.validateField('pwd2');
          }
          callback();
        }
      };
      var pwd2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.loginForm.pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
       doctor:useCounterStore(),
      // 验证loginForm对象属性
      loginForm: {
          phone:'',//用户输入得手机号
          // code:'',
          pwd: '',
          pwd2: '',
        },
        // 验证规则:属性名称要和表单对象的属性名称保持一致，否则会失效
        rules: {
          // 手机规则
          phone:[
            { validator: phone, trigger: 'blur' }
          ],
          // 验证码
          // code:[
          //   { validator: code, trigger: 'blur' }
          // ],
          // 密码
          pwd: [
            { validator: pwd, trigger: 'blur' },
            { min: 6,max: 10,message: '长度在 6 到 10个字符'}, 
		        {pattern: /^(\w){6,10}$/, message: '只能输入6-10个字母、数字、下划线'},
          ],
          // 二次密码
          pwd2: [
            { validator: pwd2, trigger: 'blur' },
          ],
       
        }
      };
  
  },
  
  methods: {
    // 检查手机号码是否正确
	   isPhone(val) {
	      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
	        return false;
	      } else {
	        return true;
	      }
	    },
    // 点击登录
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
                url:'/userlogin',
                method:'POST',
                data:{
                    phone:this.loginForm.phone,
                    // code:this.loginForm.code,
                    pwd:this.loginForm.pwd,
                    // pwd2:this.loginForm.pwd2,
                }
            }).then(res=>{
              console.log(res);
              if(res.data.code === 300){
                  // 成功后提示
                  this.$message({
                         message:'成功登录,欢迎来到该网页',
                         type:'success'
                })

                
                this.doctor.username=res.data.username
                // console.log(this.doctor.username);
                // 保存后端发送回来的UserToken令牌值，保存在locaStorage中
                // window.localStorage.setItem("UserToken",res.data.UserToken);
                
                 // //成功之后跳转主页
            this.$router.push({path:'/'})
         
              }else if(res.data.code === 4003){
                this.$message.error('密码错误')
              }else if(res.data.code === 4002) {
                    this.$message.error('手机号不存在')
                }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    
  },
};
</script>

<style scoped>

.topbanner {
  height: 80px;
  width: 100%;
  background-color: #f8f7fb;
}
.banner {
  width: 1060px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  justify-content: left;
}
.banner .logo {
  width: 152px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner .logo img {
  width: 152px;
  height: 55px;
}
.banner .title {
  margin-left: 50px;
  margin-top: 40px;
  color: #333333;
}
/* 登录大盒子 */
.ulogin_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 卡片 */
.box_card {
  margin-top: 50px;
  width: 500px;
  height: 320px;
  background-color: #fcfcfc;
}
.loginFrom {
  height: 200px;
  width: 300px;
  box-shadow: 00 25px #cac6c6;
}
.button {
  margin-left: 90px;
  margin-top: 30px;
}
.span {
  color: #555454;
  font-size: 10px;
  margin-left: 10px;
}

</style>